<template>
  <div>
      <p class="y_c_input1">
        <input type="text" placeholder="输入患者姓名、基本信息,药方查询" v-model="medicKey">
        <i class="iconfont icon-sousuo" @click="getRecord(1)"></i>
      </p>
    <scroller class="shoplist_container" :onRefresh="refresh"
      :onInfinite="infinite"
    >
      <ul style="padding:0 0.4rem 0.4rem 0.4rem">
        <li v-for="(item,index) in list" :key="item.id" class="ulli">
          <div class="shop_right">
            <p class="shop_name">姓名：{{item.PATIENTNAME}}</p>
            <p class="shop_name">基本信息：{{item.ACCSEX + ' ' + item.ZY_COUNTRY + ' ' + item.ZY_PROVINCE + ' ' + item.ZY_CITY}}</p>
            <p class="fee_distance">药方份数：{{item.PRESCRIBENUM}}</p>
            <p>药方详情：
              <ul style="list-style:none;margin-bottom:0;padding-left:0.6rem" :class="[isFold[index]?'isfold' : '']">
                <li v-for="(item,index) in item.DURGLIST.split(',')" :key="item.id">
                  {{index+1}}.{{item.split('#')[1]}}<span style="float:right">{{item.split('#')[4]}}</span>
                </li>
              </ul>
            </p>
            <p @click.stop="Fold(index)" style="color:#3190e8;display:inline-block">{{isFold[index]?'显示全部':'收起'}}</p>
            <p class="fee_distance">药方备注：{{item.PRESCRIBEEXPLAIN}}</p>
            <p style="color:#aaa">开药方时间：{{item.OPENTIME}}<span class="patient_question" @click="goOpenPrescribe(item)">继续开药</span></p>
          </div>
        </li>
      </ul>
    </scroller>
    <backTop></backTop>
  </div>
</template>
<script>
import backTop from '~/components/pagetwo/backTop.vue';

export default {
  data() {
    return {
      list: [],
      ts: this.newStore(),
      page: 0,
      isFold: [],
      medicKey: '',
    };
  },
  components: {
    backTop,
  },
  methods: {
    refresh(done) {
      this.page = 0;
      this.getRecord(1, done);
    },
    infinite(done) {
      setTimeout(() => {
        this.page += 1;
        this.getRecord(this.page, done);
      }, 500);
    },
    Fold(index) {
      this.isFold.splice(index, 1, !this.isFold[index]);
    },
    getRecord(page, fn) {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.01.20',
          CLIENTID: 'YLAPP',
          RYBID: 'DOCTOR',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            rowsperpage: '10',
            page: `${this.page}`,
            keywords: this.medicKey,

          },
        },
      });

      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        for (let i = 0; i < ts.d.DATAOBJ.DATA.length; i += 1) {
          this.isFold.push(true);
        }
        if (ts.d.DATAOBJ.DATA.length < 1) {
          this.page = 0;
          fn(true);
          return;
        } else if (fn) {
          fn();
        }
        if (page == 1) {
          this.list = ts.d.DATAOBJ.DATA;
        } else {
          this.list = this.list.concat(ts.d.DATAOBJ.DATA);
        }
      });
    },
    goOpenPrescribe(item) {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.01.23',
          CLIENTID: 'YLAPP',
          RYBID: 'DOCTOR',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            prescribeId: item.PRESCRIBEID,
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        console.log(ts.d);
        this.$router.push({
          name: 'openPrescribe',
          query: {
            name: item.PATIENTNAME,
            info: `${item.ACCSEX} ${item.ZY_COUNTRY} ${item.ZY_PROVINCE} ${item.ZY_CITY}`,
            id: item.PATIENTID,
            dragSl: item.PRESCRIBENUM,
            dragList: ts.d.DATAOBJ.DATA,
            prescribeType: item.PRESCRIBETYPE,
          },
        });
      });
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.patient_question {
  background: #3190e8;
  float: right;
  color: #fff;
  padding: 0.2rem 0.8rem;
  font-size: 0.9rem;
  border-radius: 0.2rem;
}
.shoplist_container {
  margin-top: 3rem;
  background: #fff;
}
.shoplist_container p{
  margin-bottom: 0rem;
  font-size: 0.9rem;
}
.shoplist_container p:last-child{
  margin-bottom: 0.6rem
}
.shoplist_container p:nth-child(2){
  margin-bottom: 0.4rem
}
.shoplist_container .ulli{
  background:rgba(241, 241, 241, .41);
  margin-bottom: 0.4rem;
  border-radius: 0.4rem;
  box-shadow: 0rem 0rem 1px 0px #ccc;
}
.shop_right {
  padding: 0.4rem 1rem 0 1rem;
  border-bottom: 1px solid #f1f1f1;
}
.fee_distance {
  width: 100%;
  overflow-wrap: break-word;
}
.patient_time {
  color: #3190e8;
  float: right;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
.isfold{
  max-height: 2.8rem;
  overflow: hidden;
}
.y_c_input1 input{
  width: 100%;
  border: none;
  padding:0.5rem 0;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  padding-right: 2rem;
  background:rgba(241, 241, 241, .41);
  text-indent: 0.3rem;
  outline:none;
  border-radius: 0.2rem;
  box-shadow: 0rem 0rem 1px 0px #ccc;
}
.y_c_input1{
  position: relative;
  width: 97%;
  margin: 0.3rem auto;
}
.y_c_input1 i{
  position: absolute;
  top: 0;
  right: 2%;
  z-index: 500;
  font-size: 1.4rem;
  color:#3190e8;
  display: inline-block
}
</style>
